<template>
  <!--分配权限-->
  <div>
    <el-dialog
        title="分配权限"
        :close-on-click-modal=false
        :visible.sync="permDialogVisible"
        :before-close="handleClose"
        width="600px">

      <el-form :model="permForm">

        <el-tree
            v-loading.lock="loading"
            :data="permTreeData"
            :default-checked-keys="this.permissionsList"
            show-checkbox
            ref="permTree"
            :default-expand-all=true
            node-key="id"
            :check-strictly=true
            :props="defaultProps">
        </el-tree>

      </el-form>

      <span slot="footer" class="dialog-footer">
			    <el-button @click="permDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitPermFormHandle('permForm')">确 定</el-button>
			</span>

    </el-dialog>
  </div>
</template>

<script>
import {getMenuList} from "@/api/sys/menu";
import {assignPermissions, getPermissionListById} from "@/api/sys/role";

export default {
  name: "RoleAssignPermissions",
  data() {
    return {
      permDialogVisible: false,
      permTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      permForm: {},
      //当前用户的权限列表
      permissionsList: [],
      loading: false,
      roleId: 0,
    }
  },
  methods: {
    //表单提交
    submitPermFormHandle(permForm) {
      this.loading = true
      const data = {
        roleId: this.roleId,
        menuIds: this.$refs.permTree.getCheckedKeys()
      }
      assignPermissions(data).then(res => {
        this.$emit("handle", res)
        this.handleClose()
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
        });
        this.loading = false
      })
    },
    //获取权限树信息
    getPermTreeData() {
      getMenuList().then(res => {
        const treeData = this.handleTree(res.data, 'id', 'parentId')
        this.permTreeData = treeData
      })
    },
    //  树形数据格式化
    handleTree(data, id, parentId) {
      id = id || 'id'
      parentId = parentId || 'parentId'
      //对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      //循环所有项
      const treeData = cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
          //返回每一项的子级数组
          return father[id] === child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        //返回第一层
        return father[parentId] === "0";
      });
      return treeData !== '' ? treeData : data;
    },

    //  获取某用户的权限列表
    getPermissionList(id) {
      this.loading = true
      getPermissionListById(id).then(res => {
        this.permissionsList = res.data.menuIds
        this.$nextTick(() => {
          if (this.permissionsList === undefined) {
            this.permissionsList = []
          }
          this.$refs.permTree.setCheckedKeys(this.permissionsList)
        })
        this.loading = false
      })
    },
    //设置角色id 当对话框打开时，父组件设置roleId
    setRoleId(id) {
      this.roleId = id
    },
    //对话框关闭处理
    handleClose() {
      // console.log("handle close")
      this.roleId = 0
      this.permissionsList = []
      this.permDialogVisible = false
      this.loading = false
    },
  },
  created() {
    this.getPermTreeData()
  },
  //检测 roleId,当roleId改变时触发
  watch: {
    roleId: function () {
      this.getPermissionList(this.roleId)
    },
  }
}
</script>

<style scoped>

</style>
